<template>
	<view class="bruce" id="conent">
		<ul class="bubble-bgwall">
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
		</ul>
		<view class="toptitle" @click="home">
			智能农业监控系统
		</view>
		<view class="showcontent"></view>
		<view class="righttop">
			<span @click="LoginRegister">登录</span> /<span @click="LoginRegister">注册</span>
		</view>
		<view class="winfroted-glass">
			<ul class="nav1">
				<li class="title1" @click="home">系统简介</li>
				<li class="title1" @click="LoginRegister">进入系统</li>
				<li class="title1" @click="relatedTechnologies">相关技术</li>
				<li class="title1" @click="InsiteCommunity">进入社区</li>
				<li class="title1" @click="teamSpirit">团队风采</li>
				<li class="title1" @click="aboutUs">关于我们</li>
			</ul>
		</view>
		<view class="forgotpassword">
			<view id="title"><span id="text">
					<p>forgot</p>
					<p>password</p>
				</span>
			</view>
			<form class="login" @submit="submit">
				<view class="userinfo">
					<svg t="1710916591356" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="6450" xmlns:xlink="http://www.w3.org/1999/xlink"
						width="200" height="200">
						<path
							d="M624 896H400c-79.392 0-144-66.992-144-149.328V277.328C256 194.992 320.608 128 400 128h224c79.408 0 144 66.992 144 149.328v469.328C768 829.008 703.408 896 624 896zM400 192c-44.112 0-80 38.288-80 85.328v469.328C320 793.712 355.888 832 400 832h224c44.112 0 80-38.288 80-85.328V277.328C704 230.288 668.112 192 624 192H400z"
							fill="#2c2c2c" p-id="6451"></path>
						<path d="M512 752m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#2c2c2c" p-id="6452"></path>
					</svg>
					<input type="tel" placeholder="请输入注册的手机号:" placeholder-style="color: #1f1f1f;"
						name="userphonenumber" />
				</view>
				<view class="userinfo">
					<svg @click="newTopy" t="1710847077560" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="5258" xmlns:xlink="http://www.w3.org/1999/xlink"
						width="200" height="200">
						<path
							d="M869.033043 393.846154a54.136928 54.136928 0 0 1 54.136928 54.136928v467.743061a54.136928 54.136928 0 0 1-54.136928 54.136929H154.966957a54.136928 54.136928 0 0 1-54.136928-54.136929V447.983082a54.136928 54.136928 0 0 1 54.136928-54.136928h714.066086m0-54.136929H154.966957a108.273857 108.273857 0 0 0-108.273856 108.273857v467.743061a108.273857 108.273857 0 0 0 108.273856 108.273857h714.066086a108.273857 108.273857 0 0 0 108.273856-108.273857V447.983082a108.273857 108.273857 0 0 0-108.273856-108.273857z"
							fill="#231815" p-id="5259"></path>
						<path
							d="M817.873645 362.71742h-54.136928v-56.843775a251.736717 251.736717 0 1 0-503.473434 0v56.843775h-54.136928v-56.843775a305.873645 305.873645 0 1 1 611.74729 0z"
							fill="#231815" p-id="5260"></path>
						<path
							d="M438.644462 520.526566m71.460746 0l3.789584 0q71.460745 0 71.460746 71.460746l0 3.789585q0 71.460745-71.460746 71.460745l-3.789584 0q-71.460745 0-71.460746-71.460745l0-3.789585q0-71.460745 71.460746-71.460746Z"
							fill="#231815" p-id="5261"></path>
						<path
							d="M483.036743 567.625694m28.151203 0l1.353423 0q28.151203 0 28.151203 28.151203l0 204.366904q0 28.151203-28.151203 28.151203l-1.353423 0q-28.151203 0-28.151203-28.151203l0-204.366904q0-28.151203 28.151203-28.151203Z"
							fill="#231815" p-id="5262"></path>
					</svg>
					<input type="{offon}" :type="offon" placeholder="请输入密码:" placeholder-style="color: #1f1f1f;"
						name="userpassowrd" />
				</view>
				<view class="userinfo">
					<svg @click="newTopy" t="1710916508980" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="4270" xmlns:xlink="http://www.w3.org/1999/xlink"
						width="200" height="200">
						<path
							d="M814.981273 1022.721598H217.32834a180.254682 180.254682 0 0 1-180.254682-178.97628v-319.600499a180.254682 180.254682 0 0 1 180.254682-181.533084h597.652933a180.254682 180.254682 0 0 1 180.254682 180.254682v104.828964a38.35206 38.35206 0 1 1-76.70412 0V522.866417a103.550562 103.550562 0 0 0-103.550562-103.550562H217.32834a103.550562 103.550562 0 0 0-103.550562 103.550562v319.600499a103.550562 103.550562 0 0 0 103.550562 103.550562h597.652933a103.550562 103.550562 0 0 0 103.550562-103.550562 38.35206 38.35206 0 1 1 76.70412 0v12.144819a37.712859 37.712859 0 0 1 0 10.227216A180.254682 180.254682 0 0 1 814.981273 1022.721598z"
							fill="#231815" p-id="4271"></path>
						<path
							d="M780.464419 395.026217a38.35206 38.35206 0 0 1-38.352059-38.35206v-53.053683a225.637953 225.637953 0 1 0-451.275906 0v52.414482a38.35206 38.35206 0 1 1-76.704119 0v-52.414482a302.342072 302.342072 0 0 1 604.684144 0v52.414482a38.35206 38.35206 0 0 1-38.35206 38.991261zM487.710362 830.961298a38.35206 38.35206 0 0 1-28.124844-12.144819l-127.8402-138.706616a38.35206 38.35206 0 1 1 56.249688-51.775281l102.911361 111.220974 222.441948-191.7603a38.35206 38.35206 0 1 1 49.857678 58.167291L512 818.816479a38.35206 38.35206 0 0 1-24.289638 12.144819z"
							fill="#231815" p-id="4272"></path>
					</svg>
					<input type="{offon}" :type="offon" placeholder="确认密码:" placeholder-style="color: #1f1f1f;"
						name="userpassowrds" />
				</view>
				<view class="userinfo">
					<svg t="1710847213252" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="6249" xmlns:xlink="http://www.w3.org/1999/xlink"
						width="200" height="200">
						<path
							d="M943.1 172c-2.4-0.2-245.1-25.3-413.8-147.8-5.1-3.7-11-5.6-17.3-5.6-6.2 0-12.2 1.9-17.3 5.6C326.9 146 83.3 171.8 80.9 172c-15.2 1.4-26.6 14.1-26.6 29.3 0 6.7 0.6 165.8 54.8 344.4 32.1 105.8 76.4 196.4 131.9 269.2 70.3 92.3 158.5 156 262 189.2 2.9 0.9 5.9 1.4 9 1.4s6.1-0.5 8.9-1.4c103.6-33.2 191.7-96.8 262-189.2 55.4-72.7 99.8-163.2 131.9-269.2 54.1-178.6 54.8-337.7 54.8-344.4C969.7 186.1 958.3 173.5 943.1 172zM910.1 227.2l-0.1 1.6c-2.9 58.1-13.4 174.4-51.4 299.9-66.7 220.1-183.1 360.1-346 416.1L512 945l-0.6-0.2C349 888.9 232.7 749.4 165.8 530.1c-39.8-130.5-49.4-254.2-51.8-301.4l-0.1-1.6 1.5-0.2c70.6-10.3 250.5-44.8 395.5-142.4l0.9-0.7 1 0.7C658 182.1 837.9 216.6 908.5 227L910.1 227.2z"
							p-id="6250"></path>
						<path
							d="M641.8 351 467 580.3l-89-76.1c-5.3-4.5-12.1-7-19.1-7-8.6 0-16.8 3.7-22.4 10.3-10.5 12.3-9.1 31 3.3 41.5l112.7 96.4c5.2 4.4 12.4 7 19.6 7 0.9 0 1.8 0 2.7-0.1 8-0.8 15.4-5 20.3-11.4l193.7-254c4.8-6.3 6.8-14 5.7-21.8-1-7.8-5.1-14.7-11.3-19.5C670.1 335.6 651.6 338.1 641.8 351z"
							p-id="6251"></path>
					</svg><input type="text" placeholder="请输入验证码:" placeholder-style="color: #1f1f1f;"
						name="usercode" /><text @click="receivecode">获取验证码</text>
				</view>
				<view class="toptobBat">
					<text @click="LoginRegister">立即登录</text>
				</view>
				<button class="submit" hover-class="onsubmit" size="mini" form-type="submit">确认</button>
			</form>
			<view id="receivecode" v-if="visible">
				<text>当前的验证码为：<span>{{code}}</span></text>
				<button @click="close" class="submit" hover-class="onsubmit" size="mini">关闭</button>
			</view>
		</view>
		<view class="andforgotpassword">
			<view id="title" @click="home"><span id="text">
					<p>forgot</p>
					<p>password</p>
				</span>
			</view>
			<form class="login" @submit="submit">
				<view class="userinfo">
					<svg t="1710916591356" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="6450" xmlns:xlink="http://www.w3.org/1999/xlink"
						width="200" height="200">
						<path
							d="M624 896H400c-79.392 0-144-66.992-144-149.328V277.328C256 194.992 320.608 128 400 128h224c79.408 0 144 66.992 144 149.328v469.328C768 829.008 703.408 896 624 896zM400 192c-44.112 0-80 38.288-80 85.328v469.328C320 793.712 355.888 832 400 832h224c44.112 0 80-38.288 80-85.328V277.328C704 230.288 668.112 192 624 192H400z"
							fill="#2c2c2c" p-id="6451"></path>
						<path d="M512 752m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#2c2c2c" p-id="6452"></path>
					</svg>
					<input type="tel" placeholder="请输入注册的手机号:" placeholder-style="color: #1f1f1f;"
						name="userphonenumber" />
				</view>
				<view class="userinfo">
					<svg @click="newTopy" t="1710847077560" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="5258" xmlns:xlink="http://www.w3.org/1999/xlink"
						width="200" height="200">
						<path
							d="M869.033043 393.846154a54.136928 54.136928 0 0 1 54.136928 54.136928v467.743061a54.136928 54.136928 0 0 1-54.136928 54.136929H154.966957a54.136928 54.136928 0 0 1-54.136928-54.136929V447.983082a54.136928 54.136928 0 0 1 54.136928-54.136928h714.066086m0-54.136929H154.966957a108.273857 108.273857 0 0 0-108.273856 108.273857v467.743061a108.273857 108.273857 0 0 0 108.273856 108.273857h714.066086a108.273857 108.273857 0 0 0 108.273856-108.273857V447.983082a108.273857 108.273857 0 0 0-108.273856-108.273857z"
							fill="#231815" p-id="5259"></path>
						<path
							d="M817.873645 362.71742h-54.136928v-56.843775a251.736717 251.736717 0 1 0-503.473434 0v56.843775h-54.136928v-56.843775a305.873645 305.873645 0 1 1 611.74729 0z"
							fill="#231815" p-id="5260"></path>
						<path
							d="M438.644462 520.526566m71.460746 0l3.789584 0q71.460745 0 71.460746 71.460746l0 3.789585q0 71.460745-71.460746 71.460745l-3.789584 0q-71.460745 0-71.460746-71.460745l0-3.789585q0-71.460745 71.460746-71.460746Z"
							fill="#231815" p-id="5261"></path>
						<path
							d="M483.036743 567.625694m28.151203 0l1.353423 0q28.151203 0 28.151203 28.151203l0 204.366904q0 28.151203-28.151203 28.151203l-1.353423 0q-28.151203 0-28.151203-28.151203l0-204.366904q0-28.151203 28.151203-28.151203Z"
							fill="#231815" p-id="5262"></path>
					</svg>
					<input type="{offon}" :type="offon" placeholder="请输入密码:" placeholder-style="color: #1f1f1f;"
						name="userpassowrd" />
				</view>
				<view class="userinfo">
					<svg @click="newTopy" t="1710916508980" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="4270" xmlns:xlink="http://www.w3.org/1999/xlink"
						width="200" height="200">
						<path
							d="M814.981273 1022.721598H217.32834a180.254682 180.254682 0 0 1-180.254682-178.97628v-319.600499a180.254682 180.254682 0 0 1 180.254682-181.533084h597.652933a180.254682 180.254682 0 0 1 180.254682 180.254682v104.828964a38.35206 38.35206 0 1 1-76.70412 0V522.866417a103.550562 103.550562 0 0 0-103.550562-103.550562H217.32834a103.550562 103.550562 0 0 0-103.550562 103.550562v319.600499a103.550562 103.550562 0 0 0 103.550562 103.550562h597.652933a103.550562 103.550562 0 0 0 103.550562-103.550562 38.35206 38.35206 0 1 1 76.70412 0v12.144819a37.712859 37.712859 0 0 1 0 10.227216A180.254682 180.254682 0 0 1 814.981273 1022.721598z"
							fill="#231815" p-id="4271"></path>
						<path
							d="M780.464419 395.026217a38.35206 38.35206 0 0 1-38.352059-38.35206v-53.053683a225.637953 225.637953 0 1 0-451.275906 0v52.414482a38.35206 38.35206 0 1 1-76.704119 0v-52.414482a302.342072 302.342072 0 0 1 604.684144 0v52.414482a38.35206 38.35206 0 0 1-38.35206 38.991261zM487.710362 830.961298a38.35206 38.35206 0 0 1-28.124844-12.144819l-127.8402-138.706616a38.35206 38.35206 0 1 1 56.249688-51.775281l102.911361 111.220974 222.441948-191.7603a38.35206 38.35206 0 1 1 49.857678 58.167291L512 818.816479a38.35206 38.35206 0 0 1-24.289638 12.144819z"
							fill="#231815" p-id="4272"></path>
					</svg>
					<input type="{offon}" :type="offon" placeholder="确认密码:" placeholder-style="color: #1f1f1f;"
						name="userpassowrds" />
				</view>
				<view class="userinfo">
					<svg t="1710847213252" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="6249" xmlns:xlink="http://www.w3.org/1999/xlink"
						width="200" height="200">
						<path
							d="M943.1 172c-2.4-0.2-245.1-25.3-413.8-147.8-5.1-3.7-11-5.6-17.3-5.6-6.2 0-12.2 1.9-17.3 5.6C326.9 146 83.3 171.8 80.9 172c-15.2 1.4-26.6 14.1-26.6 29.3 0 6.7 0.6 165.8 54.8 344.4 32.1 105.8 76.4 196.4 131.9 269.2 70.3 92.3 158.5 156 262 189.2 2.9 0.9 5.9 1.4 9 1.4s6.1-0.5 8.9-1.4c103.6-33.2 191.7-96.8 262-189.2 55.4-72.7 99.8-163.2 131.9-269.2 54.1-178.6 54.8-337.7 54.8-344.4C969.7 186.1 958.3 173.5 943.1 172zM910.1 227.2l-0.1 1.6c-2.9 58.1-13.4 174.4-51.4 299.9-66.7 220.1-183.1 360.1-346 416.1L512 945l-0.6-0.2C349 888.9 232.7 749.4 165.8 530.1c-39.8-130.5-49.4-254.2-51.8-301.4l-0.1-1.6 1.5-0.2c70.6-10.3 250.5-44.8 395.5-142.4l0.9-0.7 1 0.7C658 182.1 837.9 216.6 908.5 227L910.1 227.2z"
							p-id="6250"></path>
						<path
							d="M641.8 351 467 580.3l-89-76.1c-5.3-4.5-12.1-7-19.1-7-8.6 0-16.8 3.7-22.4 10.3-10.5 12.3-9.1 31 3.3 41.5l112.7 96.4c5.2 4.4 12.4 7 19.6 7 0.9 0 1.8 0 2.7-0.1 8-0.8 15.4-5 20.3-11.4l193.7-254c4.8-6.3 6.8-14 5.7-21.8-1-7.8-5.1-14.7-11.3-19.5C670.1 335.6 651.6 338.1 641.8 351z"
							p-id="6251"></path>
					</svg><input type="text" placeholder="请输入验证码:" placeholder-style="color: #1f1f1f;"
						name="usercode" /><text @click="receivecode">获取验证码</text>
				</view>
				<view class="toptobBat">
					<text @click="LoginRegister">立即登录</text>
				</view>
				<button class="submit" hover-class="onsubmit" size="mini" form-type="submit">确认</button>
			</form>
			<view id="receivecode" v-if="visible">
				<text>当前的验证码为：<span>{{code}}</span></text>
				<button @click="close" class="submit" hover-class="onsubmit" size="mini">关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		generateCaptcha
	} from '../../utils/getCode';
	import {
		VUE_APP_BASE_URL
	} from 'utils/request.js'
	export default {
		data() {
			return {
				cssid: '',
				offon: "password",
				visible: false,
				code: "null",
			}
		},

		onLoad(e) {
			this.cssid = e.cssid;
		},
		mounted() {
			this.draw();
		},
		methods: {
			teamSpirit() {
				uni.reLaunch({
					url: '/pages/teamSpirit/teamSpirit?cssid=' + this.cssid
				})
			},
			InsiteCommunity() {
				uni.navigateTo({
					url: '/pages/InsiteCommunity/InsiteCommunity?cssid=' + this.cssid
				})
			},
			relatedTechnologies() {
				uni.navigateTo({
					url: '/pages/relatedTechnologies/relatedTechnologies?cssid=' + this.cssid
				})
			},
			aboutUs() {
				uni.navigateTo({
					url: '/pages/aboutUs/aboutUs?cssid=' + this.cssid
				})
			},
			receivecode(e) {
				this.visible = true;
				let newcode = generateCaptcha();
				this.code = newcode;
				console.log("当前验证码为：" + newcode);
			},
			close(e) {
				this.visible = false;
			},
			submit(e) {
				if (e.detail.value.userphonenumber.length == 11) {
					if (e.detail.value.userphonenumber != '' && e.detail.value.usercode != '' && e.detail.value
						.userpassowrd !=
						'' && e.detail.value.userpassowrds != '') {
						if (e.detail.value.userpassowrd != ' ' && e.detail.value.userpassowrds != ' ') {
							if (e.detail.value.userpassowrd === e.detail.value.userpassowrds) {
								if (e.detail.value.usercode.toLowerCase() === this.code.toLowerCase()) {
									this.close(e)
									console.log(e.detail.value.userpassowrd);
									console.log(e.detail.value.userphonenumber);
									//网络请求
									uni.request({
										url: VUE_APP_BASE_URL + '/user/updatauser',
										data: {
											userpassword:e.detail.value.userpassowrd,
											userphonenumber:e.detail.value.userphonenumber
										},
										header: {
											"Content-Type": "application/x-www-form-urlencoded"
										},
										method: "POST",
										success: (res) => {
											if (res.data.code == 200) {
												// console.log(res);
												/*如果验证服务器成功则执行成功提示*/
												uni.showToast({
													title: "修改成功",
													icon: 'success',
													duration: 1000
												});
												setTimeout(() => {
													// 跳转到设备列表
													uni.navigateTo({
														url: '/pages/LoginRegister/LoginRegister?cssid=' +
															this.cssid
													});
												}, 1000);
											} else {
												uni.showToast({
													title: "该手机号未注册",
													icon: 'error',
													duration: 2000
												});
											}
										}
									})
								} else {
									this.close(e)
									uni.showToast({
										title: '验证码错误',
										icon: 'error',
										duration: 1000
									})
								}
							} else {
								uni.showToast({
									title: '两次密码不一致',
									icon: 'error',
									duration: 1000
								})
							}

						} else {
							uni.showToast({
								title: '密码不能为空字符',
								icon: 'error',
								duration: 1000
							})
						}

					} else {
						uni.showToast({
							title: '所有字段都不能为空',
							icon: 'error',
							duration: 1000
						})
					}

				} else {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'error',
						duration: 1000
					})
				}

			},
			newTopy(e) {
				var newType = this.offon == 'password' ? 'text' : 'password';
				this.offon = newType
			},
			home() {
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			LoginRegister(e) {
				uni.navigateTo({
					url: '/pages/LoginRegister/LoginRegister?cssid=' + this.cssid
				})
			},
			draw(e) {
				let themes = document.querySelector('.bruce');
				let color = document.querySelectorAll(".bubble")
				if (this.cssid == 1) {
					this.button = false;
					this.title = "白天模式"
					this.cssid = 1
					themes.style.background = 'linear-gradient(270deg, #0a0b35, #120144)'
					color.forEach(function(element) {
						element.style.color = '#83c0f7'
					});

				} else {
					this.title = "夜间模式"
					this.button = true;
					this.cssid = 0
					themes.style.background = 'linear-gradient(270deg, #819cad, #81a5bd)'
					color.forEach(function(element) {
						element.style.color = '#6661e6'
					});

				}
			}

		}
	}
</script>

<style lang="scss">
	@media screen and (min-width: 640px) {
		#conent {
			background: #030812 !important;

			.toptitle {
				position: fixed;
				margin-left: 5px;
				width: 100%;
				padding: 20px;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0px;
				font-weight: bold;
				color: #d8d8d8;
				left: 0;
				display: block;
				background: #393d49;
				background-image: url('https://gd-hbimg.huaban.com/23c7d4ff432744f58bbd2087eb6745a4f66d95c757996-Z6BbHB_fw1200');
				background-repeat: no-repeat;
				background-size: 100vw;
			}

			.righttop {
				position: fixed;
				margin-left: 5px;
				width: 50%;
				padding: 20px 40px 20px 0;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0;
				font-weight: bold;
				color: #d8d8d8;
				right: 0;
				display: block;
				text-align: right;
				background: transparent;

				span {
					&:hover {
						color: #009688;
					}
				}
			}

			.showcontent {
				background: rgba(255, 255, 255, 0.5);
				z-index: 10;
				display: block;
				justify-content: center;
				position: fixed;
				left: 0;
				margin: 0 50px 0 50px;
				width: 100%;
				height: 100vh;
				backdrop-filter: blur(2px);

			}

			.winfroted-glass {
				background-color: transparent;
				z-index: 10;
				width: 140px;
				display: flex;
				position: fixed;
				left: 0px;
				top: 10px;

				.nav1 {
					margin-top: 30px;
					width: 120px;
					height: 100vh;
					background-color: #393d49;
					position: relative;
					display: block;
					margin-left: 5px;
					box-sizing: border-box;
					padding: 50px 0 0 0;
					border-left: 5px solid #222e6f;
					justify-content: center;
					text-align: center;

					.title1 {
						width: 100%;
						margin: 10px auto;
						padding: 10px 0;
						list-style: none;
						text-align: center;
						color: #d8d8d8;
						transition: background-color 0.3s ease;

						&:hover {
							background: #009688;
							border-right: #ffffff 2px solid;
							cursor: pointer;
						}
					}
				}


			}

			.forgotpassword {

				width: 70%;
				height: 50vh;
				position: absolute;
				display: block;
				left: 20vw;
				z-index: 100;
				background-color: #515151;
				overflow: hidden;

				#title {
					position: relative;
					text-align: center;
					display: block;
					font-size: 30px;
					height: 100vh;
					width: 40%;
					left: 0px;
					font-weight: bold;
					z-index: 19;
					text-transform: uppercase;
					background-image: url('https://gd-hbimg.huaban.com/6d7162e1e3777e659ab1e10e4985e2aacd58c8601ccc6c-JegHau');
					background-position: center center;
					background-size: cover;

					#text {
						display: block;
						color: #fefefe;
						padding-top: 21vh;
						padding-bottom: 35vh;
						background: rgba(21, 21, 21, 0.6);
						position: relative;
					}
				}

				.login {
					width: 60%;
					height: 100vh;
					top: -100vh;
					padding-top: 8vh;
					display: block;
					position: relative;
					right: 0;
					float: right;
					background-image: linear-gradient(to left, #4b4b4b, #73767a);

					.userinfo {
						width: 300px;
						color: #191b18;
						background: #c7c7c7;
						margin: 20px auto;
						border-radius: 50px;
						padding: 10px;
						box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
						justify-content: center;
						box-sizing: border-box;

						svg {
							display: block;
							width: 20px;
							height: 20px;
							padding: 0 15px;
							float: left;
						}

						input {
							width: 180px;
							display: block;
						}
					}

					.userinfo:nth-child(4) {
						height: 44px;

						input {
							width: 180px;
							padding-right: -10px;
						}

						text {
							width: 80px;
							display: inline-block;
							font-size: 14px;
							position: relative;
							text-align: center;
							color: #6a280d;
							align-items: center;
							top: -23px;
							right: -200px;

							&:hover {
								color: #183f0d;
								background: #009688;
							}
						}
					}


					.toptobBat {
						width: 300px;
						margin: auto;
						display: flex;
						text-align: center;
						justify-content: space-between;

						text {
							width: 100%;
							display: block;
							justify-content: space-around;
							color: #ffffff;

							&:hover {
								font-weight: bold;
								color: #81a5bd;
							}
						}
					}

					.submit {
						display: block;
						position: relative;
						justify-content: center;
						justify-content: space-between;
						top: 20px;
						margin: auto;
						padding: 5px;
						width: 200px;
						border-radius: 50rpx;
						border: none;
						box-shadow: rgb(165, 230, 230) 0rpx 10rpx 20rpx;

					}

					.onsubmit {
						transform: scale(0.9);
					}


				}

				#receivecode {
					display: flex;
					position: fixed;
					top: 100px;
					height: 50px;
					padding: 10px;
					width: 90vw;
					justify-content: space-between;
					margin: 0px auto;
					z-index: 1000;
					background: #ddd;

					text {
						display: block;
						text-align: center;
						margin: 10px auto;
						color: #111;
						font-size: 20px;
					}

					.submit {
						position: relative;
						justify-content: center;
						top: -5px;
						margin: auto;
						right: 10px;
						padding: 5px;
						width: 100px;
						border-radius: 50rpx;
						border: none;
						box-shadow: rgb(165, 230, 230) 0rpx 10rpx 20rpx;

					}

					.onsubmit {
						transform: scale(0.9);
					}

				}

				&:hover {
					background-color: rgba(194, 252, 252, .13);
					box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.3);
				}

			}

			.andforgotpassword {
				display: none;
			}
		}
	}

	.bruce {
		background-image: linear-gradient(270deg, #819cad, #81a5bd);
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		.winfroted-glass {
			display: none;
		}

		.toptitle {
			display: none;
		}

		.righttop {
			display: none;
		}

		.frosted-glass {
			box-sizing: border-box;
			overflow: hidden;
			position: fixed;
			display: flex;
			top: 20vh;
			align-items: center;
			width: 72vw;
			height: 60vh;
			border-radius: 1%;
			box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
			backdrop-filter: blur(10px);
			transition: 0.5s ease;
			animation: code 2s;

		}

		.forgotpassword {
			display: none;
		}

		.andforgotpassword {
			width: 100%;
			height: 100vh;
			display: block;
			position: fixed;
			background: transparent;
			backdrop-filter: blur(3px);
			box-sizing: border-box;
			overflow: hidden;

			#title {
				position: relative;
				background-color: transparent;
				text-align: center;
				font-size: 30px;
				top: 15.5vh;
				margin: 10px auto 0px;
				font-weight: bold;
				color: #fefefe;
				display: block;
				z-index: 19;
				text-transform: uppercase;
			}

			.login {
				width: 320px;
				display: flex;
				margin: auto;
				padding-top: 20px;
				height: 465px;
				position: relative;
				justify-content: center;
				align-items: center;
				top: 4vh;
				border-radius: 15px;
				background-image: url('https://gd-hbimg.huaban.com/23c7d4ff432744f58bbd2087eb6745a4f66d95c757996-Z6BbHB_fw1200');
				box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);

				.userinfo {
					width: 260px;
					color: #ffffff;
					background: #506e6f;
					margin: 10px auto;
					border-radius: 50px;
					padding: 10px;
					box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
					justify-content: center;
					box-sizing: border-box;

					svg {
						display: block;
						width: 20px;
						height: 20px;
						padding: 0 15px;
						float: left;
					}

					input {
						width: 180px;
						display: block;
					}
				}

				.userinfo:nth-child(4) {
					height: 44px;

					input {
						width: 100px;
						padding-right: -10px;
					}

					text {
						width: 80px;
						display: inline-block;
						font-size: 14px;
						position: relative;
						align-items: center;
						top: -23px;
						right: -164px;

						&:hover {
							color: #f0ebe8;
						}
					}
				}



				.toptobBat {
					width: 100%;
					margin-top: 12px;
					display: flex;
					text-align: center;
					justify-content: space-between;

					text {
						display: block;
						width: 100%;
						color: #ffffff;
						text-align: center;

						&:hover {
							font-weight: bold;
							color: #81a5bd;
						}
					}
				}

				.submit {
					display: block;
					position: relative;
					justify-content: center;
					justify-content: space-between;
					top: 20px;
					margin: auto;
					padding: 5px;
					width: 200px;
					border-radius: 50rpx;
					border: none;
					box-shadow: rgb(165, 230, 230) 0rpx 10rpx 20rpx;

				}

				.onsubmit {
					transform: scale(0.9);
				}

				&:hover {
					background-color: rgba(194, 252, 252, .13);
					box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
				}
			}

			#receivecode {
				display: flex;
				position: fixed;
				top: 70px;
				height: 50px;
				padding: 10px;
				width: 100%;
				justify-content: space-between;
				margin: 0px auto;
				z-index: 1000;
				background: #ddd;

				text {
					display: block;
					// width: 100%;
					text-align: center;
					margin: 10px auto;
					color: #111;
					font-size: 20px;
				}

				.submit {
					position: relative;
					justify-content: center;
					top: -5px;
					margin: auto;
					right: 10px;
					padding: 5px;
					width: 100px;
					border-radius: 50rpx;
					border: none;
					box-shadow: rgb(165, 230, 230) 0rpx 10rpx 20rpx;

				}

				.onsubmit {
					transform: scale(0.9);
				}
			}
		}

		@media (max-width: 640px) {
			.frosted-glass .title {
				font-size: 2em;
			}
		}
	}

	.bubble-bgwall {
		position: relative;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.bubble {
		display: flex;
		position: absolute;
		bottom: -200px;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		width: 50px;
		height: 50px;
		background-color: rgba(255, 255, 255, 0.15);
		color: #44397a;
		animation: bubble 15s infinite;
	}

	.bubble:nth-child(1) {
		left: 10%;
	}

	.bubble:nth-child(2) {
		left: 20%;
		width: 90px;
		height: 90px;
		animation-duration: 7s;
		animation-delay: 2s;
	}

	.bubble:nth-child(3) {
		left: 25%;
		animation-delay: 4s;
	}

	.bubble:nth-child(4) {
		left: 40%;
		width: 60px;
		height: 60px;
		background-color: rgba(255, 255, 255, 0.3);
		animation-duration: 8s;
	}

	.bubble:nth-child(5) {
		left: 70%;
	}

	.bubble:nth-child(6) {
		left: 80%;
		width: 120px;
		height: 120px;
		background-color: rgba(255, 255, 255, 0.2);
		animation-delay: 3s;
	}

	.bubble:nth-child(7) {
		left: 32%;
		width: 160px;
		height: 160px;
		animation-delay: 2s;
	}

	.bubble:nth-child(8) {
		left: 55%;
		width: 40px;
		height: 40px;
		font-size: 12px;
		animation-duration: 15s;
		animation-delay: 4s;
	}

	.bubble:nth-child(9) {
		left: 25%;
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.3);
		font-size: 12px;
		animation-duration: 12s;
		animation-delay: 2s;
	}

	.bubble:nth-child(10) {
		left: 85%;
		width: 160px;
		height: 160px;
		animation-delay: 5s;
	}

	@keyframes bubble {
		0% {
			opacity: 0.5;
			transform: translateY(0) rotate(45deg);
		}

		25% {
			opacity: 0.75;
			transform: translateY(-400px) rotate(90deg);
		}

		50% {
			opacity: 1;
			transform: translateY(-600px) rotate(135deg);
		}

		100% {
			opacity: 0;
			transform: translateY(-1000px) rotate(180deg);
		}
	}

	@keyframes code {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>